.my-grids{
  position: relative;
  overflow: hidden;
  &:before{   // 定义顶部边框样式 (<1px)
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;  // left right 为0 表示 width100%
    height: 1px;
    border-top: 1px solid #D9D9D9; // 顶部边框颜色
    color: #D9D9D9;
    transform-origin: 0 0;
    transform: scaleY(0.5);  // Y轴方向 搜索0.5
  }
  &:after{   // 定义 左边的 边框
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    border-left: 1px solid #D9D9D9;
    color: #D9D9D9;
    transform-origin: 0 0;
    transform: scaleX(0.5);
  }
  .my-grid{   // 单元格
    position: relative;
    float: left;
    padding: 10px; // 0.4rem 0.2rem;
    width: 20%;
    cursor: pointer;
    // @include row-ctrl(3);
    &:before {  // 单元格 的 右边框
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 1px;
      border-right: 1px solid #D9D9D9;
      transform-origin: 100% 0; // 以x轴的 右侧为 变形中心
      transform: scaleX(0.5);
    }
    &:after{     // 单元格 的 底边框
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      border-bottom: 1px solid #D9D9D9;
      transform-origin: 0 100%;
      transform: scaleY(0.5);
    }
    &:active{
      background-color: #ececec;
    }
    &__icon-warp{
      position: relative;
      width: 60%;
      padding-top: 60%;
      margin: 0 auto;
      // border: 1px solid red;
      & + .my-grid__label{  // 使用 + 选择器 表示 在 .grid_icon 随后的 .grid_label 才有margin-top
        margin-top: 5px;
      }
    }
    &__icon{
      position: absolute;
      width: 100%;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    &__label{
      display: block;
      text-align: center;
      // color: #000000;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}